// 匿名函数
;(function($){
  // $.fn是指jquery的命名空间
  $.fn.slider = function(options){
     var defaults = {
       autoScroll : true, //是否滚动
       speed:3000,  //默认3秒
       numControl:false, //数字
       arrowControl:false, //左右箭头
       fadeIn:false, //淡出淡入
       onChange:function(index){}  //回调函数拿索引值index做事件处理
     }

     var settings = $.extend({},defaults,options),
         slider = $(this),
         ul = slider.find('ul'),
         li = ul.find('li'),
         img = li.find("img"),
         width= slider.width(),
         height= slider.height(),
         length=li.length,
         timer = null,
         islock = true,
         index = 0;
     ul.css({
       width:width*length,
       height:height
     });
   
    
     //如果配置参数存在就扩展默认的配置参数
     if(getConfig()){
        settings=$.extend({},defaults,getConfig());
        console.log(defaults,getConfig())
      };

     if(settings.autoScroll){
       //开始滚动
       timer = setInterval(pic,settings.speed);
     }

     //创建锚点数字
     if(settings.numControl){
        slider.append('<div id="num"></div>');
        for(var i=0;i<length;i++){
          slider.find("#num").append("<span>"+(i+1)+"</ span>");
        }
        slider.find("#num span").eq(0).addClass("active");
        // 鼠标移上去要对应的index
        slider.find("#num span").on("mouseover",function(){
          index=$(this).index();
          slider.find("#num span").eq(index).addClass("active").siblings().removeClass("active");
          showPic(index);//对应index滚动图片的位置
        });
     }

     //创建左右切换箭头
     if(settings.arrowControl){
         slider.append('<div class="left">&lt;</div><div class="right">&gt;</div>');
         var prev = slider.find('.left');
         var next = slider.find('.right');
         //左箭头触发事件
         prev.on("click",function(){
            if(islock){
              islock=false;
              index--;
              if(index == -1) index=length-1;
              showPic(index);
              isLock();
            }
         });
         //右箭头触发事件
         next.on("click",function(){
          if(islock){
            islock=false;
            index++;
            if(index==length) index=0;
            showPic(index);
            isLock();
          }
        });
     }

      
     //  使用绑定data字符串传参数
     function getConfig() {
        var defaults =slider.attr("data-config");
        //确保有配置参数
        if(defaults && defaults!=""){
            return $.parseJSON(defaults);
        }else {
            return null;
        }
    }

     //加锁防止多次点击触发,异步节流一下
     function isLock(){
        setTimeout(function(){ 
          islock = true;
        }, 500);
     }

     function pic() {
       //定义index的索引值
       index++;
       if(index == length) index=0;
       showPic(index);
     }

     function showPic(index){
          //如果转入的是fadeIn是淡出的效果，否则是左右轮换
          if(settings.fadeIn){
            li.eq(index).fadeIn().siblings().fadeOut();
          }else{
            //让图滚动起来
            ul.animate({
              marginLeft:-index*width
            });
          }

          slider.find("#num span").eq(index).addClass("active").siblings().removeClass("active");
          settings.onChange(index);
     }

     //鼠标移动到图片时停止
     slider.on("mouseover",function(){
        clearInterval(timer)
     });
     //鼠标离开图片时又可以滚动
     slider.on("mouseout",function(){
         if(settings.autoScroll){
           timer = setInterval(pic,settings.speed)
         }
     });

    return this; //返回this上下文，可做jq的方法连缀
  }

})(jQuery)